<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">运营位查询</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true" size='small'>
                    <el-form-item label="展示位置:">
                        <el-select v-model="searchObj.position" size='small' @change="selectChange" placeholder="全部" style="width: 130px">
                            <el-option v-for="(value,key) in positionMap" :key="key" :label="value" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态:">
                        <el-select v-model="searchObj.status" clearable size='small' @change="selectChange" placeholder="" style="width: 130px">
                            <el-option label="全部" value=""/>
                            <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品名称:">
                        <el-select v-model="searchObj.appId" size='small' clearable placeholder="" style="width: 150px">
                            <el-option label="全部" value=""/>
                            <el-option v-for="item in appData" :key="item.appId" :label="item.appName" :value="item.appId"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="vip专属">
                        <el-select v-model="searchObj.vip" size='small' @change="selectChange" placeholder="" style="width: 140px">
                            <el-option label="全部" value=""/>
                            <el-option label="否" value="0"/>
                            <el-option label="是" value="1"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size='small' icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addeditDailog('add')" size='small'>新增</el-button>
                    </el-form-item>
                </el-form>
                <!--表格数据-->
                <el-table :data="tableData" v-loading="listLoading" element-loading-text="拼命加载中" border>
                    <el-table-column type='index' width='70' label="编号"/>
                    <el-table-column prop="appId" label="产品ID"/>                    
                    <el-table-column prop="appName" label="产品名称"/>
                    <el-table-column prop="appDesInfo" label="产品描述"/>
                    <el-table-column prop="positionInfo" label="展示位置" width="100"/>
                    <el-table-column label="vip专属">
                        <template slot-scope="scope">
                            {{scope.row.vip == 0 ? "否" : "是"}}
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="跳转链接" width="110">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>跳转链接: {{ scope.row.recordLinkUrl }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">查看</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column> 
                    <el-table-column label="排序">
                        <template slot-scope="scope">
                            <el-input type="number" min='1' onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-show="scope.row.edit.sort" size="small" v-model="scope.row.sort" style="width:60px"></el-input>
                            <span v-show="!scope.row.edit.sort">{{ scope.row.sort }}</span>
                            <i class="sort-icon" :class="scope.row.edit.sort?'el-icon-check':'el-icon-edit-outline'" @click='editSort(scope.row)'></i>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="sort" label="排序" width="100"/>                 -->
                    <!-- <el-table-column prop="statusInfo" label="状态" width="100"/> -->
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <span :class="scope.row.statusInfo == '下线'?'color-red':''">
                                {{scope.row.statusInfo}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" class-name="second-btn">
                        <template slot-scope="scope">
                            <el-button type="warning" size="mini" @click="upDownline(scope.row)">{{scope.row.status == 1 ? '下线': '上线'}}</el-button>
                            <el-button type="primary" size="mini" @click="addeditDailog('edit',scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteData(scope.$index,scope.row.autoId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>
                <!-- 弹窗 -->
                <el-dialog :title="`${dialogTitle}-(${positionMap[searchObj.position]})`" :close-on-click-modal='false' :visible.sync="dialogFormVisible" width="50%" @close="closeDailog">
                    <el-form label-width="130px">
                        <el-form-item label="产品名称:">
                            <el-select v-model="dailogFrom.appId" filterable size='small' :disabled="selectDisabled" placeholder="" style="width: 200px">
                                <el-option v-for="item in appData" :key="item.appId" :label="item.appName" :value="item.appId"/>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="展示位置:">
                            <el-select v-model="dailogFrom.position" size='small' placeholder="" style="width: 200px">
                                <el-option v-for="(value,key) in positionMap" :key="key" :label="value" :value="key" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="排序:">
                            <el-input v-model.trim="dailogFrom.sort" placeholder="" size='small' style="width:200px;"/>
                        </el-form-item>
                        <el-form-item label="跳转地址:">
                            <el-input v-model.trim="dailogFrom.recordLinkUrl" placeholder="" size='small' style="width:400px;"/>
                        </el-form-item>
                        <el-form-item label="状态:">
                            <el-select v-model="dailogFrom.status" size='small' placeholder="" style="width: 200px">
                                <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                            </el-select>
                        </el-form-item>                        
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>
<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            listLoading: false, //加载中
            searchObj: {
                appId: "",
                position: "1",
                status: "", // 状态
                vip:"" // vip
            }, //查询参数
            tableData: [], //查询列表
            currentPage: 1, // 当前页数
            pageCount: 1, // 总页数

            statusMap: {
                "1": "上线",
                "0": "下线"
            },
            positionMap: {
                "1": "首页",
                "2": "店铺",
                "3": "产品推广",
                "4": "banner"
            },

            dialogTitle: "", // 弹窗标题
            dialogType: "", // 弹窗类型
            dialogFormVisible: false,
            formLabelWidth: "120px",
            dailogFrom: {
                appId: "",
                status: "1",
                // position: ""
            },

            appData: [], //产品列表
            selectDisabled: false
        };
    },
    watch: {
        dialogType() {
            if (this.dialogType === "add") {
                this.dialogTitle = "新增";
            } else {
                this.dialogTitle = "编辑";
                this.selectDisabled = true;
            }
        }
    },
    methods: {
        // 点击查询
        onSubmit() {
            // 查询数据列表
            this.getDataList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询数据列表
            this.getDataList();
        },
        selectChange() {
            this.getDataList();
        },
        // 查询数据列表
        getDataList() {
            this.listLoading = true;
            api.getOperationResourcesList({
                ...this.searchObj,
                pageNum: this.currentPage
            })
                .then(res => {
                    this.listLoading = false;
                    // this.tableData = res.data.list;
                    // this.pageCount = res.data.pages;
                    const items = res.data.list;
                    this.tableData = items.map(obj => {
                        //多列sort可编辑
                        obj = Object.assign({}, obj, {
                            edit: {
                                sort: false
                            }
                        })
                        return obj;
                    })
                    this.pageCount = res.data.pages;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },

        // 查询产品列表
        getAppList() {
            api.getProductInfoList({
                pageSize: 1000
            }).then(res => {
                this.appData = res.data.list;
            });
        },

        // 新增/编辑 弹窗
        addeditDailog(type, rowData) {
            if (type == "add") {
                this.dialogType = "add";
            } else {
                this.dialogType = "edit";
                // this.dailogFrom = Object.assign({}, rowData);
                for (const key in rowData) {
                    if (rowData[key] !== null) {
                        this.dailogFrom[key] = rowData[key].toString();
                    }
                }
            }
            this.dialogFormVisible = true;
        },
        // 上下线操作
        upDownline(row) {
            const statusStr = row.status === 1 ? "下线" : "上线";
            this.$confirm(`确定${statusStr}该产品吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    const postObj = {
                        autoId: row.autoId,
                        status: row.status === 1 ? 0 : 1
                    };
                    console.log(postObj);
                    api.updateOperationResources(postObj).then(res => {
                        this.$message.success("操作成功!");
                        // 获取数据列表
                        this.getDataList();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },

        //删除产品
        deleteData(index, autoId) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    console.log("delete");
                    api.deleteOperationResources({
                        autoId: autoId
                    }).then(res => {
                        // 改变页面显示
                        this.tableData.splice(index, 1);
                        // 重新请求列表
                        // this.getDataList();
                        // 提示成功
                        this.$message.success("删除成功!");
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },

        // 关闭弹窗 输入框数据清空
        closeDailog() {
            this.dailogFrom = {
                appId: "",
                status: "1",
                // position: ""
            };
            this.selectDisabled = false;
        },

        // 新增/编辑 确定
        confirm() {
            if (!this.dailogFrom.appId) {
                this.$message.error("请选择产品!");
                return false;                
            }
            if (this.dialogType === "add") {
                // 添加数据
                this.addData();
            } else if (this.dialogType === "edit") {
                // 更新数据
                this.updateData();
            }
        },

        // 添加数据
        addData() {
            api.addOperationResources({
                ...this.dailogFrom,
                position:this.searchObj.position
            }).then(() => {
                this.$message.success("新增成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        },
        // 更新数据
        updateData() {
            api.updateOperationResources({
                ...this.dailogFrom,
                position:this.searchObj.position
            }).then(() => {
                this.$message.success("更新成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        },

        // 表格内编辑排序
        editSort(row) {
            if (row.edit.sort) {
                if (!row.sort || row.sort <= 0) {
                    this.$message.error("请输入正确排序!");
                    return false;
                }
                api.updateOperationResources({
                    autoId: row.autoId,
                    sort: row.sort
                }).then((res) => {
                    if (res.code !== 1) {
                        this.$message.error(res.message);
                        return false;
                    }
                    row.edit.sort = !row.edit.sort;
                    this.$message.success('更新成功!');
                    // 查询数据列表
                    this.getDataList();
                }).catch(err => {
                    this.$message.error('网络挂啦，请求不到数据！');
                });
            } else {
                row.edit.sort = true;
            }
        },
    },
    mounted() {
        // 查询产品列表
        this.getAppList();
        // 查询数据列表
        this.getDataList();
    }
};
</script>

<style>
.sort-icon {
    cursor: pointer;
}
</style>
